<template>
  <div>
    <el-form :inline="true" ref="queryForm" :model="query">
      <el-form-item>
        <el-tag class="retryTag">日志重试时间间隔信息：</el-tag
        ><el-tag
          type="info"
          class="retryTag"
          v-for="(item, itemIndex) in retryConfig"
          :key="itemIndex"
          >{{ item }} s</el-tag
        >
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetSearchForm"
          >刷新</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%"
      :height="maxTableHeight"
    >
      <!-- 表格属性 start -->
      <el-table-column prop="serviceName" label="运行服务" width="150">
      </el-table-column>
      <el-table-column prop="serviceIp" label="服务IP" width="200">
      </el-table-column>
      <el-table-column prop="key" label="任务编码" width="240">
      </el-table-column>
      <el-table-column prop="name" label="任务名称" width="180">
      </el-table-column>
      <el-table-column prop="desc" label="任务描述"> </el-table-column>
      <el-table-column prop="cron" label="任务cron" width="120" align="center"></el-table-column>
      <el-table-column
        prop="delay"
        label="下次运行剩余时间"
        width="150"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.delay ? parseInt(row.delay / 1000) + " s" : "" }}</template
        >
      </el-table-column>
      <el-table-column prop="isRun" label="运行状态" width="90" align="center">
        <template slot-scope="{ row }">
          <el-tag v-if="row.isRun">正常</el-tag>
          <el-tag type="danger" v-if="!row.isRun">停止</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="任务数量" width="90" align="center">
      </el-table-column>
      <el-table-column
        prop="hasLogException"
        label="日志状态"
        width="90"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.hasLogException">异常</el-tag>
          <el-tag v-if="!row.hasLogException">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lastRunTime" label="上次运行时间" width="120">
        <template slot-scope="{ row }">
          {{
            row.runInfo ? $moment(row.runInfo.lastRunTime).fromNow() : "----"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="runMilliseconds"
        label="请求耗时"
        width="90"
        align="center"
      >
        <template slot-scope="{ row }">
          {{
            row.runInfo ? row.runInfo.runMilliseconds + " ms" : "----"
          }}</template
        >
      </el-table-column>
      <el-table-column prop="log" label="日志信息" width="90" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="medium"
            icon="el-icon-document"
            @click="openRetryLogListDialog(row)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- 表格属性 end -->
    </el-table>

    <RetryLogList ref="retryLogListDialog"></RetryLogList>
  </div>
</template>

<script>
import { mapState } from "vuex";
import listMixins from "@/views/base/listMixins";

// 请求接口 start
import RetryLogList from "@/views/sys/retryLogTask/logList";
import sysApi from "@/api/sysApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "sysRetryLogTask",
  // 组件名称 start
  mixins: [listMixins],
  components: {
    RetryLogList,
  },
  data() {
    return {
      maxTableHeight: `${document.documentElement.clientHeight}` - 180,
      // 数据 start
      dialogTitle: "重试日志",
      permission: {},
      query: {
        operateName: "",
      },
      retryConfig: [],
    };
  },
  methods: {
    openRetryLogListDialog(row) {
      this.$refs.retryLogListDialog.showDialog(row);
      this.$refs.retryLogListDialog.resetSearchForm();
    },
    remoteTableData() {
      // 分页请求 start
      sysApi.retryLogTask.taskList(this.searchParams()).then((res) => {
        this.updateNoPageTableData(res.data);
      });
      // 分页请求 end
    },
    remoteOtherData() {
      sysApi.retryLogTask.retryConfig().then((res) => {
        this.retryConfig = res.data;
      });
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>
<style lang="less" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
}
.retryTag {
  margin-right: 10px;
}
.retryTag:last-child {
  margin-right: 0px;
}
</style>